{% extends "album_layout.html" %}
{% block content %}
<main role="main">
    <div class="album py-4 bg-light">
        <div class="container" style="width:85%;">
            <!-- <small>
                <p class="lead text-muted" style="color: rgba(255, 255, 255, 0.8) !important;">基于 Flask 开发的  Web App 驿站盒子
            </small> -->
            <h1 class="cover-heading">驿站盒子 – 实用功能集成云平台</h1>
            <p class="text-muted mt-4" style="color: rgba(255, 255, 255, 0.8) !important;">驿站盒子，即Yizhan
            Box，是一款实用功能集成云平台。核心亮点是通过Python和高德API结合，实现了实时天气查询和智能路径规划两项核心功能。网站还为用户提供了名字全称应用、元音字母词频统计功能。
            目的在于打造一个便利于大学生生活使用的功能平台，其功能构想符合于产品“盒子”的理念，愿本产品能成为每个人生活中不可或缺的“百宝盒”愿景。</p>
            <br>
            <div class="row">
                <div class="col-md-6">
                    <div class="card mb-4 shadow-sm">
                        <div class="bd-placeholder-img card-img-top" width="100%" height="425">
                                <img src="/static/img/1.png" alt=""  width="100%" height="425">
                        </div>
                        <div class="card-body">
                            <p class="card-text">用户可通过输入名、字后，平台通过运算可输出用户所输入的名字全称拼写。
                            点击下方按钮，体验名字全称拼写</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="btn-group">
                                    <a class="btn  btn-primary" href="/name">开始体验</a>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card mb-4 shadow-sm">
                        <div class="bd-placeholder-img card-img-top" width="100%" height="425">
                            <img src="/static/img/2.png" alt="" width="100%" height="425">
                        </div>

                        <div class="card-body">
                            <p class="card-text">用户只需输入元音和所需查询的单词后，平台即可运算输出单词中对应的元音字母及其词频。
                            点击下方按钮，体验元音字母词频统计</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="btn-group">
                                    <a class="btn  btn-primary" href="/tongji">开始体验</a>
                                </div>
                              
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card mb-4 shadow-sm">
                        <div class="bd-placeholder-img card-img-top" width="100%" height="425">
                            <img src="/static/img/3.png" alt="" width="100%" height="425">
                        </div>

                        <div class="card-body">
                            <p class="card-text">用户只需输入“目的地”及“出发点”，平台结合实时交通，自动规划出不拥挤路线，提供更贴心的出行体验。点击下方按钮，体验智能路径规划</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="btn-group">
                                    <a class="btn  btn-primary" href="/searchway">开始体验</a>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card mb-4 shadow-sm">
                        <div class="bd-placeholder-img card-img-top" width="100%" height="425">
                            <img src="/static/img/4.png" alt="" width="100%" height="425">
                        </div>

                        <div class="card-body">
                            <p class="card-text">用户只需输入指定地点，结合平台“天气查询API”智能加值，即可可达到实时查询某个地点天气的效果。
                            点击下方按钮，体验实时天气查询.</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="btn-group">
                                    <a class="btn  btn-primary" href="/weather">开始体验</a>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <br>
        </div>
    </div>
</main>
{% endblock content %}